<template>
  <div class="ml-5 my-4">
    <div class="is-size-4  has-text-weight-bold">
      数据概览
      <div class="primary-color is-size-4">——</div>
    </div>
    <div class="">欢迎，{{ userName }}</div>
    <el-divider />

    <el-row class="overview">
      <el-col v-for="(item, index) in overviewData" :key="index" :span="5">
        <el-card class="mx-4 my-4" shadow="hover">
          <div slot="header" class="clearfix">
            <div :class="index < 4 ? 'overview-num' : 'overview-num-black'">
              {{ item.num }}
            </div>
          </div>

          <div class="bottom clearfix">
            <span class="overview-title">{{ item.title }}</span>
            <el-button
              v-if="index < 4"
              style="float: right; padding:0px;"
              type="text"
              @click="$router.push(item.path)"
            >>></el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const commonApi = require('@/api/common')

export default {
  name: 'Dashboard',
  data() {
    return {
      overviewData: [],
      userName: this.$store.state.user.userName
    }
  },

  computed: {},
  mounted() {
    commonApi.getOverviewData().then(res => {
      console.log(res)
      this.overviewData = [
        {
          title: '累计编题数',
          num: res.data.totalQuestionNum,
          path: '/questions'
        },
        {
          title: '累计创编试卷',
          num: res.data.totalPaperNum,
          path: '/papers'
        },
        {
          title: '累计发布考试',
          num: res.data.totalExamNum,
          path: '/exams'
        },
        {
          title: '累计发布练习',
          num: res.data.totalExerciseNum,
          path: '/exams'
        },
        {
          title: '教师总数',
          num: res.data.totalTeacherNum
        },
        {
          title: '学生总数',
          num: res.data.totalStudentNum
        },
        {
          title: '班级总数',
          num: res.data.totalClazzNum
        }
      ]
    })
  },
  methods: {
    toExam() {
      this.$router.push('/exam')
    }
  }
}
</script>

<style lang="scss" scoped>
.overview {
  margin: 20px 0px;
  padding: 5px;
  // border-radius: 5px;
  &-item {
    border: 1px solid #e7e7e7;
    // margin: 10px;
    // margin-right: 20px;
    border-radius: 4px;
    // padding: 15px 20px;
  }
  &-num {
    font-weight: bold;
    color: #3761ee;
    // margin-bottom: 5px;
    font-size: 20px;
  }
  &-num-black {
    font-weight: bold;
    color: #1f1f1f;
    // margin-bottom: 5px;
    font-size: 20px;
  }
  &-title {
    color: #7a7a7a;
    font-size: 14px;
  }
}

.bottom {
  margin-top: 0px;
  line-height: 12px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}

.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
